<template>
    <div>
        <panle title='定金列表' content="定金列表"></panle>
        
        <div class="searchbar">
			<el-row class="pt20">
				<el-col :span="12">
					<pers-button icon="el-icon-edit" size="mini" @click="add()" perms="live:deposit:add" type="primary" label="添加"></pers-button>
				</el-col>
				<el-col>
					<el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
                        <el-form-item label="定金单号" prop="deposit_num">
                            <el-input size="mini" placeholder="请输入定金单号" v-model="form.deposit_num"></el-input>
                        </el-form-item>
                        <el-form-item label="课程名称" prop="course_name">
                            <el-input size="mini" placeholder="请输入课程名称" v-model="form.course_name"></el-input>
                        </el-form-item>
                        <el-form-item label="定金状态" prop="state">
                            <el-select size="mini" v-model="form.state" placeholder="请选择">
                                <el-option v-for="item in state_list" :key="item.state" :label="item.state_name" :value="item.state">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="手机号" prop="tel">
                            <el-input size="mini" placeholder="请输入手机号" v-model="form.tel"></el-input>
                        </el-form-item>
                        <el-form-item label="销售用户号" prop="nick_name">
                            <el-input size="mini" placeholder="请输入" v-model="form.nick_name"></el-input>
                        </el-form-item>
                        <el-form-item label="支付时间" prop="pay_time">
                            <el-date-picker
                                v-model="form.pay_time"
                                type="daterange"
                                align="right"
                                size="mini"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :default-time="['00:00:00', '23:59:59']"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="创建时间" prop="create_time">
                            <el-date-picker
                                v-model="form.create_time"
                                type="daterange"
                                align="right"
                                size="mini"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :default-time="['00:00:00', '23:59:59']"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search" size="mini">搜索</el-button>
                            <el-button @click="resetForm('form')" size="mini">重置</el-button>
                            <el-button size="mini" @click="init()">刷新</el-button>
                            <vue-json-excel
                                style="display: inline;margin-left: 10px;"
                                :data="tableData"
                                :fields="excelFields"
                                name="导出订金.xlsx"
                                type="xlsx"
                            >
                                <el-button size="mini">导出</el-button>
                            </vue-json-excel>
                        </el-form-item>
                    </el-form>
				</el-col>
			</el-row>
		</div>
        <div class="table-wrap">
            <el-table :data="tableData" :loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border
                      stripe default-expand-all height="800">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID" width="55"></el-table-column>
                <el-table-column prop="deposit_num" label="定金单号"></el-table-column>
                <el-table-column prop="state_name" label="定金状态"></el-table-column>
                <el-table-column prop="fee_name" label="定金金额"></el-table-column>
                <el-table-column prop="actual_payment_fee_name" label="实际支付金额"></el-table-column>
                <el-table-column prop="course_name" label="课程名称"></el-table-column>
                <el-table-column prop="tel" label="手机号"></el-table-column>
                <el-table-column prop="wx_avatarurl" label="微信头像">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.wx_avatarurl" fit="fill" style="width: 60px;height: 60px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="微信昵称"></el-table-column>
                <el-table-column prop="is_pay_order" label="是否付尾款"></el-table-column>
                <el-table-column prop="nick_name" label="私域助教"></el-table-column>
                <el-table-column prop="pay_time" label="支付时间"></el-table-column>
                <el-table-column prop="create_time" label="创建时间"></el-table-column>
                <el-table-column prop="pay_method_name" label="支付方式"></el-table-column>
                <el-table-column prop="state" label="操作" v-if="isShow(['live:deposit:refund','live:deposit:edit','live:deposit:copypay','live:deposit:updatefee'])">
                    <template slot-scope="scope">
                        <PersButton type="text" size="mini" label="退款" icon="fa  fa-undo" perms="live:deposit:refund"
                                    @click="tuikuan(scope.row)" v-if="scope.row.is_show_refund"></PersButton>
                        <PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil" perms="live:deposit:edit"
                                    @click="edit(scope.row)" v-if="scope.row.state == 0"></PersButton>
                        <PersButton type="text" size="mini" label="复制定金支付链接" icon="fa fa-share" perms="live:deposit:copypay"
                            @click="copy(scope.row.pay_url)" v-if="scope.row.state == 0"></PersButton>
                        <!-- <PersButton type="text" size="mini" label="复制尾款支付链接" icon="fa fa-share" perms="live:deposit:copypay"
                            @click="copy(scope.row.pay_order_url)" v-if="scope.row.state == 1 && !scope.row.siyu_order_id"></PersButton> -->
                        <PersButton type="text" size="mini" icon="fa fa-share" label="改价复制尾款支付链接" perms="live:deposit:updatefee" @click="updatefee(scope.row)"  v-if="scope.row.state == 1 && !scope.row.siyu_order_id"></PersButton>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="form.pageNumber" :page-sizes="[10, 50, 100, 200]"
                               :page-size="form.pageSize"
                               background layout="total, sizes, prev, pager, next, jumper"
                               :total="total"></el-pagination>
            </div>
        </div>
        <!-- 新增｜修改 -->
        <el-dialog :visible.sync="openEditForm" width="600px" class="dialog" append-to-body :title="!editForm.id ? '新增定金' : '修改定金'">
			<el-form ref="editForm" :model="editForm" :rules="editRules" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="私域课程" prop="siyu_course_id">
							<el-select v-model="editForm.siyu_course_id" placeholder="请选择课程" size="small"  @change="getInfo(editForm.siyu_course_id)">
                                <el-option v-for="item in siyu_course_list" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
						</el-form-item>
					</el-col>
                    <el-col :span="24" v-if="editForm.siyu_course_id">
						<el-form-item label="课程价格">
                            <span>{{course_info.fee_name}}</span>
						</el-form-item>
					</el-col>
                    <el-col :span="24">
						<el-form-item label="定金金额" prop="fee">
							<el-input v-model="editForm.fee" placeholder="请输入定金金额" size="small" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="open = false" size="small">取 消</el-button>
				<el-button type="primary" @click="submitForm('editForm')" size="small">确 定</el-button>
			</div>

		</el-dialog>

         <!-- 弹窗 -->
         <el-dialog v-dialogDrag :visible.sync="openUpdatePriceForm" width="600px"  append-to-body title="课程尾款支付改价">
            <el-form ref="updatepriceForm" :model="updatepriceForm" :rules="updatePriceRules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="课程价格" prop="course_fee">
                            <el-input style="width:50%" v-model="updatepriceForm.course_fee" disabled size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="已支付定金" prop="deposit_fee">
                            <el-input style="width:50%" v-model="updatepriceForm.deposit_fee" disabled size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="尾款应付" prop="order_fee">
                            <el-input style="width:50%" v-model="updatepriceForm.order_fee" placeholder="请输入课程价格" size="small" />
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('updatepriceForm')" size="mini" >重置</el-button>
                <el-button style='background-color:red' v-if="updatepriceForm.link==''" :disabled="disabled" type="primary" @click="submitFormFee('submit')" size="small">{{updatepriceForm.msg}}</el-button>
                <el-button v-else type="primary" @click="submitFormFee('copy')" size="small">{{updatepriceForm.msg}}</el-button>
            </div>

        </el-dialog>
    </div>
</template>
<script>
import Panle from '@/components/Panle';
import {updateCourseFee} from '@/api/live/course';
import {list,siyuCourseList,editDeposit,tuikuan} from '@/api/live/deposit';
import PersButton from '@/components/PersButton';
import debounce from '@/common/debounce.js';
import {hasPermission, isShow} from '@/common/permission';
import VueJsonExcel from 'vue-json-excel';

export default {
    name:'Live-Deposit',
    components: {
        Panle,
        PersButton,
        VueJsonExcel
    },
    data() {
        return {
            openEditForm: false,
            openUpdatePriceForm:false,
            state_list:[],
            pay_method_list:[],
            siyu_course_list:[],
            tableData: [],
            total:0,
            form: {
                deposit_num: '',
                course_name: '',
                state: '',
                tel: '',
                nick_name:'',
                pay_time: [],
                create_time: [],
                pageSize: 10,
                pageNumber: 1,
            },
            course_info:{},
            editForm:{
                id:'',
                fee:'',
                siyu_course_id:''
            },
            editRules: {
                fee: [{
                    required: true,
                    message: "请输入定金金额",
                    trigger: "blur"
                }],
                siyu_course_id: [{
                    required: true,
                    message: "请选择一个课程",
                    trigger: "blur"
                }],
            },
            updatepriceForm:{
                id:0,
                course_fee:0,
                deposit_fee:0,
                order_fee:0,
                msg:"生成尾款支付链接",
                link:"",
            },
            disabled:false,
            updatePriceRules: {
                order_fee: [{
                    required: true,
                    message: "课程价格不能为空",
                    trigger: "blur"
                }],
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },

            excelFields: {
                "定金单号": "deposit_num",
                "定金单状态": "state_name",
                "定金金额": "fee_name",
                "实际付款金额": "actual_payment_fee_name",
                "课程名称": "course_name",
                "用户手机号": "tel",
                "支付方式": "pay_method_name",
                "用户微信昵称": "nickname",
                "私域助教": "nick_name",
                "是否付尾款": "is_pay_order",
                "支付时间": "pay_time",
                "创建时间": "create_time"
            }
        }
    },
    created() {
        this.init(true);
    },
    methods: {
        hasPermission,
        isShow,
        init() {
            this.loading = true;
            list(this.form).then((res) => {
                console.log(res);
                this.tableData = res.data.list;
                this.total = res.data.total;
                this.state_list = res.data.state_list;
                this.pay_method_list = res.data.pay_method_list;
                this.loading = false;
            })
            siyuCourseList().then((res) => {
                console.log(res);
                this.siyu_course_list = res.data;
                this.loading = false;
            })
        },
        search: function () {
            this.loading = true;
            this.form.pageSize = 10;
            this.form.pageNumber = 1;
            this.init();
        },
        handleSizeChange: function (e) {
            console.log(e);
            this.form.pageSize = e;
            this.init();
        },
        handleCurrentChange: function (e) {
            console.log(e);
            this.form.pageNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            if (formName=='updatepriceForm'){   
                this.updatepriceForm.order_fee=this.updatepriceForm.course_fee-this.updatepriceForm.deposit_fee;
                this.updatepriceForm.msg="生成尾款支付链接";
                this.updatepriceForm.link="";
            }else{
                this.form.deposit_num = '';
                this.form.course_name = '';
                this.form.state = '';
                this.form.tel = '';
                this.form.nick_name = '';
                this.init();
            }
        },
        tuikuan: function (e) {
            this.$confirm('确定要退款吗, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                tuikuan({id:e.id}).then((res)=>{
                    if(res.code==200){
                        this.msgSuccess("退款成功");
                        this.init();
                    }else{
                        this.msgError(res.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取退款'
                });          
            });
        },
        add: function() {
            this.editForm = {
                id:'',
                siyu_course_id:'',
                fee:''
            };
            this.openEditForm = true;
        },
        edit:function(data){
            this.editForm = {
                id:data.id,
                siyu_course_id:data.siyu_course_id,
                fee:data.fee_name
            }
            this.getInfo(data.siyu_course_id);
            this.openEditForm = true;
        },
        submitForm(e) {
            console.log(this.editForm);
            console.log(this.course_info);
            if(parseFloat(this.editForm.fee)>=parseFloat(this.course_info.fee_name)){
                this.msgError('定金金额不能大于等于课程价格');
                return false;
            }
            this.$refs[e].validate((valid) => {
                if (valid) {
                    editDeposit(this.editForm).then((res)=>{
                        console.log(res)
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.init();
                            this.openEditForm=false;
                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },
        updatefee:function(data){
            this.updatepriceForm.id = data.id;
            this.updatepriceForm.course_fee = data.course_fee_name;
            this.updatepriceForm.deposit_fee = data.fee_name;
            this.updatepriceForm.order_fee = data.order_fee_name;
            this.updatepriceForm.link = '';
            this.updatepriceForm.msg = '生成尾款支付链接';
            this.updatepriceForm.type = 'deposit';
			this.openUpdatePriceForm = true;
        },
        submitFormFee:function(type){
            if(type=='submit'){
                this.disabled=true;
                updateCourseFee(this.updatepriceForm).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.updatepriceForm.msg="复制尾款支付链接";
                        this.updatepriceForm.link=res.data.link;
                        this.disabled=false;
                    } else {
                        this.msgError(res.msg);
                        this.disabled=false;
                    }
                })
            }else if(type=='copy'){
                this.copy(this.updatepriceForm.link);
            }
            
        },
        copy(url){
            console.log(url);
            const input = document.createElement('input');
            input.value = url; // 获取要复制的文本
            document.body.appendChild(input);
            input.select(); // 选中文本
            document.execCommand('copy'); // 执行复制操作
            document.body.removeChild(input); // 移除临时的输入框
            // alert('文本已复制到剪贴板'); // 可选：给用户反馈
            this.$notify({
                    message: '链接已复制到剪贴板',
                    type: 'success'
                });
            this.openUpdatePriceForm=false;
        },
        getInfo(id){
            for(let i =0;i<this.siyu_course_list.length;i++){
                if(id==this.siyu_course_list[i].id){
                    this.course_info=this.siyu_course_list[i];
                }
            }
        }
    }
}


</script>

<style lang="scss" scoped>

.demo-form-inline {
    margin: 20px;
    
}
::v-deep .el-select .el-input {
    width:300px;
}

::v-deep .el-input--small .el-input__inner{
    width:300px;
}

.el-input__prefix, .el-input__suffix{
    left:275px;
}
.el-select .el-input {
    width: 130px;
}

.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.search-content {
    width: 100%;
    margin: 20px;
}
.course_wig{
    width:300px;
}

</style>